<template>
  <div class="b-cont">
    <div>
      <cus-section class="b-cells" title="基本信息" m-color="#46CDCF" content-height="auto">
        <flex-box :gutter="0" flex-wrap="wrap" style="padding: 10px 8px 0;">

          <flex-box-item :span="0.5" class="b-cell">
            <flex-box align-items="stretch" class="b-cell-b">
              <div class="b-cell-name">人员名称：</div>
              <div class="b-cell-value">{{ detail.personName }}</div>
            </flex-box>
          </flex-box-item>
          <flex-box-item :span="0.5" class="b-cell">
            <flex-box align-items="stretch" class="b-cell-b">
              <div class="b-cell-name">创建时间：</div>
              <div class="b-cell-value">{{ detail.createTime }}</div>
            </flex-box>
          </flex-box-item>

          <flex-box-item :span="0.5" class="b-cell">
            <flex-box align-items="stretch" class="b-cell-b">
              <div class="b-cell-name">当前工作负载：</div>
              <div class="b-cell-value">{{ detail.currentJobLoad }}</div>
            </flex-box>
          </flex-box-item>

        </flex-box>
      </cus-section>

    </div>
  </div>
</template>

<script>
import BaseInfoMixin from '@/mixins/BaseInfo'
import TWmsReciptIntoLocPlanApi from '@/api/web/TWmsReciptIntoLocPlanApi'

export default {
  name: 'HrEmployeeManageInfo',
  mixins: [BaseInfoMixin],
  props: {
    employeeManage: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  watch: {
    employeeManage() {
      this.handleQuery()
    }
  },
  data() {
    return {
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      loading: true
    }
  },
  created() {
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions(){
    },
    handleQuery(){
      this.loading = true
      //console.log(this.employeeManage)

      TWmsReciptIntoLocPlanApi.page('',this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      })
    },
  }

}
</script>

<style lang="scss" scoped>
.b-cont {
  position: relative;
  padding: 0 50px 20px 20px;
}

.b-cells {
  margin-top: 25px;
}

.b-cell {
  padding: 0 10px;
  overflow: hidden;
  .b-cell-b {
    width: auto;
    padding: 8px;
    .b-cell-name {
      width: 110px;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
    }
    .b-cell-name2 {
      width: 100%;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
    }
    .b-cell-value {
      font-size: 13px;
      color: #333;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .b-cell-foot {
      flex-shrink: 0;
      display: block;
      width: 15px;
      height: 15px;
      margin-left: 8px;
    }
  }
}

.f-item {
  padding: 3px 0;
  height: 25px;
  .f-img {
    position: block;
    width: 15px;
    height: 15px;
    padding: 0 1px;
    margin-right: 8px;
  }
  .f-name {
    color: #666;
    font-size: 12px;
    margin-right: 10px;
  }
}
</style>
